<template>
  <div>
    <div class="commentItem" v-for="(item, index) in comList" :key="index">
      <div class="up" v-if="item.author">
        <img :src="baseUrl + item.author.avatar" />
        <div class="info">
          <div>{{ item.author.nickname }}</div>
          <div class="time">{{ item.created_at | formatTime }}</div>
        </div>
        <div class="zan" @click="zan(item.id)">
          <span>{{ item.star }}</span>
          <van-icon name="good-job-o" />
        </div>
      </div>
      <div class="down">{{ item.content }}</div>
    </div>
  </div>
</template>

<script>
import { starArticleComment } from '@/api/api.js'
export default {
  props: ['comList'],

  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      iszan: false,
      zannum: ''
    }
  },
  created () {},
  methods: {
    async zan (id) {
      this.iszan = !this.iszan
      const res = await starArticleComment({ id: id })
      this.zannum = res.data.data.num
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.commentItem {
  padding-top: 10px;
  border-bottom: 1px solid #eee;
  padding-right: 10px;
  .up {
    display: flex;
    padding: 10px 0;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 1px solid #666;
    }
    .info {
      font-size: 12px;
      margin: 0 200px 0 10px;

      .time {
        color: #666;
      }
    }
    .zan {
      color: #999;
      font-size: 20px;
    }
  }
  .down {
    font-size: 14px;
    margin-left: 30px;
    margin-top: 20px;
  }
}
</style>
